<template>
	<screen-page title="装配项目信息总览" ref="page">
		<el-carousel height="100%" arrow="never" :pause-on-hover="false" :interval="$config.base.screen.newscreen3.scrollInterval" :key="refreshKey">
			<el-carousel-item v-for="(pageitem,pageindex) in pageData" :key="'carousel-page-'+pageindex">
				<div class="project-page-layout">
					<div class="divider"></div>
					<div class="flex-block">
						<project-card v-if="pageitem[0]" :data-source="pageitem[0]" />
					</div>
					<div class="divider"></div>
					<div class="flex-block">
						<project-card v-if="pageitem[1]" :data-source="pageitem[1]" />
					</div>
					<div class="divider"></div>
				</div>
			</el-carousel-item>
		</el-carousel>
	</screen-page>
</template>

<script setup>
import { ref, inject, onMounted, onBeforeUnmount } from 'vue';
import ScreenPage from '@/components/ScreenPage.vue'
import { ElCarousel, ElCarouselItem } from 'element-plus'
import ProjectCard from './modules/ProjectCard.vue'
import { $loading } from '@/assets/js/utils'

const $config = inject('$config')
const $api = inject('$api')

let interval = null;

const pageData = ref([])
const refreshKey = ref(0)

const getData = function(callback){
	$api.get('AssemblyWorkshop',{},{block:'newscreen',loading:true}).then((d)=>{
		let arr = d || []; 
		let pageArr = [];
		arr.forEach((item,index)=>{
			let obj = {
				index:String(index+1),
				title:item.projectName,
				planDaysNumber:item.planNum,
				actDaysNumber:item.actuaityNum,
				completePercentText:item.percentage
			}
			if ((index%2===0)) {
				pageArr.push([obj])
			} else {
				let _n = Math.trunc(index/2)
				pageArr[_n].push(obj)
			}
		})
		let pL = pageArr.length
		if (pL>0) {
			if (pageArr[pL-1].length===1) {
				pageArr[pL-1].push(null)
			}
		}
		pageData.value = pageArr
		refreshKey.value = new Date().getTime()
	}).catch((err)=>{
		console.log(err)
	})
}

const createInterval = function(){
	interval = window.setInterval(getData,$config.base.screen.newscreen3.intervalTime)
}

const destoryIntervel = function(){
	try{
		window.clearInterval(interval)
		interval = null
	}catch(e){
		//TODO handle the exception
	}
}

onMounted(()=>{
	getData()
	createInterval()
})

onBeforeUnmount(()=>{
	destoryIntervel()
})
</script>
<style scoped lang="scss">
.el-carousel--horizontal{
	height: 100%;
}
.project-page-layout{ 
	$dividerSize:.12em;
	display: flex;
	height: 100%;
	box-sizing: border-box;
	padding-bottom: 40px;
	padding-top: .12em;
	.divider {
		width: $dividerSize;
		flex-shrink: 0;
	}
	.flex-block{
		width: 1px;
		flex-grow: 1;
	}
}
</style>